<template>
  <div>
    御剑乘风来,除魔天地间!
    <div id="myCharts" ref="myCharts"></div>
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
           
<script>
//1.引入echarts矩形图
import echarts from "echarts";
import _ from 'lodash'
import { reports_api } from "@/api";
export default {
  data() {
    return {
      //需要拼接的数据
      options: {
        title: {
          text: "用户来源"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3"
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ]
      }
    };
  },
  methods: {
    async init() {
      var {data:res} = await reports_api();
      
      //2. 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      //4.准备数据和配置项
      var aa = _.merge(res.data,this.options);

      //5. 使用刚指定的配置项和数据显示图表。
      myChart.setOption(aa);
    }

  },
  mounted() {
    this.init();
  }
};
</script>
<style scoped>
</style>